<template>
	<view class="example">
		<view class="search-container">
			<uni-search-bar v-model="searchKeyword" @input="handleSearch" @clear="handleSearch" placeholder="请输入用户名"
				radius="30" bgColor="#FFFFFF" placeholderStyle="color:#a0b1c5;font-size:14px;">
			</uni-search-bar>
		</view>

		<!-- 用户列表 -->
		<view class="list-container">
			<uni-list v-if="userList.length > 0" :border="false">
				<uni-list-item v-for="(item, index) in userList" :key="item._id" :title="item.username || '未知'"
					:note="(item.d_ids && item.d_ids.text) || '未知'" clickable @click="onclick(item._id)"
					class="user-card">
					<template v-slot:header>
						<view class="avatar-placeholder">
							<image :src=" item.avatar || '/static/avatar/empty.png'" class="avatar-text"></image>
						</view>
					</template>
					<template v-slot:footer>
						<view :class="['status-badge', `status-${item.status}`]">
							{{ status[item.status] || '未知' }}
						</view>
					</template>
				</uni-list-item>
			</uni-list>

			<!-- 加载更多组件 -->
			<uni-load-more :status="loadingStatus" v-if="userList.length > 0" color="#007aff"></uni-load-more>
		</view>

		<!-- 空数据提示 -->
		<view v-if="userList.length === 0 && !loading" class="empty-container">
			<image src="/static/avatar/empty.png" class="empty-image"></image>
			<text class="empty-text">暂无用户数据</text>
		</view>

		<!-- 新增按钮 -->
		<uni-fab ref="fab" horizontal="right" vertical="bottom" bgColor="#007aff" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		onReachBottom() {
			this.loadMore();
		},
		data() {
			return {
				status: {
					0: '正常',
					1: '禁用',
					2: '审核中',
					3: '审核拒绝'
				},
				userList: [],
				page: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				noMoreData: false,
				searchKeyword: ''
			};
		},
		mounted() {
			this.getUsers();
		},
		computed: {
			loadingStatus() {
				if (this.loading) return 'loading';
				if (this.noMoreData) return 'noMore';
				return 'more';
			}
		},
		methods: {
			onclick(e) {
				uni.$router.to({
					url: 'pagesA/user/edit',
					params: {
						_id: e
					}
				});
			},
			fabClick() {
				uni.$router.to({
					url: '/pagesA/user/add',
				})
			},

			// 提供给外部调用的加载更多方法
			loadMore() {
				if (!this.noMoreData) {
					this.page++;
					this.getUsers();
				}
			},

			// 处理搜索
			handleSearch() {
				this.resetPagination();
				this.getUsers();
			},

			// 重置分页参数
			resetPagination() {
				this.page = 1;
				this.userList = [];
				this.noMoreData = false;
			},

			// 获取用户数据
			async getUsers() {
				this.loading = true;

				const obj = uniCloud.importObject('users');

				try {
					const query = {};
					if (this.searchKeyword) {
						query.$or = [{
							username: {
								$regex: this.searchKeyword,
								$options: 'i'
							}
						}];
					}
					const res = await obj.getUserInfo({
						page: this.page,
						pageSize: this.pageSize,
						...query
					});
					if (res.code === 0) {
						this.userList = [...this.userList, ...res.data];
						this.total = res.total;

						if (this.userList.length >= this.total) {
							this.noMoreData = true;
						}
					} else {
						uni.showToast({
							title: res.message
						});
					}
				} catch (e) {
					//console.error('获取用户失败:', e);
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			}
		}
	};
</script>

<style lang="scss">
	.example {
		padding: 20rpx 0 100rpx 0;
		background-color: #f5f9ff;
		min-height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	.search-container {
		padding: 20rpx 30rpx;
		background: linear-gradient(to right, #1a6dff, #4a8eff);
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(26, 109, 255, 0.15);
	}

	.list-container {
		padding: 0 30rpx;
		margin-top: 20rpx;
	}

	.user-card {
		margin-bottom: 20rpx;
		border-radius: 16rpx !important;
		overflow: hidden;
		box-shadow: 0 6rpx 18rpx rgba(74, 142, 255, 0.1);
		background-color: #ffffff;
		border: none !important;

		.uni-list-item__container {
			padding: 24rpx 30rpx !important;
			align-items: center;
		}

		.uni-list-item__content-title {
			font-size: 32rpx !important;
			font-weight: 600;
			color: #1a3a7a !important;
			line-height: 1.4;
		}

		.uni-list-item__content-note {
			font-size: 26rpx !important;
			color: #6b7a99 !important;
			margin-top: 4rpx !important;
		}
	}

	.avatar-placeholder {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(to bottom right, #4a8eff, #1a6dff);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		overflow: hidden;
		border: 2rpx solid rgba(255, 255, 255, 0.5);

		.avatar-text {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.status-badge {
		padding: 4rpx 16rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		background-color: #007aff;
		/* 默认蓝色 */
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 32rpx;
		min-width: 80rpx;
		text-align: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);

		&.status-0 {
			background-color: #4cd964;
			/* 正常：绿色 */
		}

		&.status-1 {
			background-color: #808080;
			/* 禁用：灰色 */
		}

		&.status-2 {
			background-color: #ff9500;
			/* 审核中：橙色 */
		}

		&.status-3 {
			background-color: #ff3b30;
			/* 审核拒绝：红色 */
		}
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;

		.empty-image {
			width: 280rpx;
			height: 280rpx;
			opacity: 0.7;
		}

		.empty-text {
			font-size: 30rpx;
			color: #a0b1c5;
			margin-top: 30rpx;
		}
	}

	/* 覆盖uni-search-bar默认样式 */
	.uni-searchbar {
		background: transparent !important;
		padding: 0 !important;
	}

	.uni-searchbar__box {
		background-color: #ffffff !important;
		border-radius: 30rpx !important;
		height: 70rpx !important;
	}
</style>